<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>
        12渲染列表
    </title>
    <script type="text/javascript" , src="../js/vue.js">

    </script>
</head>

<body>
    <div id="root">
        <h2> {{name}} </h2>
        <button @click="add"> add one Mr.liu </button>
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">姓名：{{p.name}} id:{{p.id}} age:{{p.age}} <input type="text"> </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    name: "name",
                    persons: [
                        { id: '001', name: "q", age: 18 },
                        { id: '002', name: "w", age: 19 },
                        { id: '004', name: "r", age: 20 },
                    ],

                }
            },
            methods: {
                add(){
                    const p = {id:'008',name:'liu',age:'20'}
                    // const p2 = {id:'009',name:'liu',age:'20'}
                    this.persons.unshift(p) // unshift() 头部添加
                    // this.persons.push(p) ///push() 结尾添加
                    // this.persons.push(p,p2)
                    // this.persons.splice(2,0,p)
//                     3、splice() 方法向/从数组指定位置添加/删除项目，然后返回被删除的项目。
// 参数	描述
// index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
// howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
// item1, ..., itemX	可选。向数组添加的新项目。
                }
            },
        })
    </script>

</body>


</html>